<template>
	<el-dialog v-model="visible" :width="700" :close-on-click-modal="false" destroy-on-close>
	  <template #header>
		<div style="width: 100%">
		  <div style="float: left;width: 100%">
			<h3>{{ form.id ? '编辑临时休假' : '新增临时休假' }}&nbsp;</h3>
		  </div>
		  <div style="float: left;width: 100%;margin-top: -10px;margin-bottom: -30px;">
			<el-divider border-style="dashed"/>
		  </div>
		</div>
	  </template>
	  <template #default>
		<el-form label-width="80" label-position="right" style="padding: 10px 10px 0 10px;">
			<el-row>
				<el-col :span="12" class="colClass">
					<el-form-item label="名称:">
					{{loginUsers.userName}}
					</el-form-item>
				</el-col>
				<el-col :span="12" class="colClass">
					<el-form-item label="编码:">
						{{loginUsers.userCode}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" class="colClass">
					<el-form-item label="所在部门:">
						<ex-label :key="loginUsers.orgId" code="SysOrganization" :value="loginUsers.orgId"/>
					</el-form-item>
				</el-col>
				<el-col :span="12" class="colClass">
					<el-form-item label="电话:">
						{{loginUsers.mobile}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>				
				<el-col :span="12" class="colClass">
					<el-form-item label="*代岗人员:">
						<ex-selector code="SysUser" :model="form" prop="replaceUser" :params="{userType:'operator'}"></ex-selector>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" class="colClass">
					<el-form-item label="邮箱:">
						{{loginUsers.email}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" class="colClass">
					<el-form-item label="休假日期:">
						<el-date-picker
					  v-model="replaceTime"
					  type="daterange"
					  range-separator="至"
					  :picker-options="pickerOptions"
					  start-placeholder="请输入休假开始日期"
					  end-placeholder="请输入休假结束日期"
					  format="YYYY-MM-DD"
					  value-format="YYYYMMDD"
				  />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	
	  </template>
	  <template #footer>
		<div style="flex: auto;text-align: center">
		  <el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
		  <el-button plain type="info" @click="this.visible = false" :loading="loading">取 消</el-button>
		</div>
	  </template>

	</el-dialog>
  </template>

  <script>
  import scIconSelect from '@/components/scIconSelect'
  import ExRelTable from "@/components/exRelTable/index.vue";
  import ExLabel from "@/components/exLabel/index.vue";
  import ExSelect from "@/components/exSelect/index.vue";
  import tool from "@/utils/tool";
  import ExSelector from "@/components/exSelector/index.vue";
  import moment from "moment";

  export default {
	emits: ['success'],
	components: {
		ExSelector,
		ExSelect,
		ExLabel,
	  ExRelTable,
	  scIconSelect
	},
	props: {
	  menu: {
		type: Object, default: () => {
		}
	  },
	},
	data() {
	  return {
		visible: false,
		  userData: {
			  id: "",
			  name: "",
			  taskType: "",
			  createOrg: "",
			  status: "",
			  startDate:"",
			  endDate:"",
			  description:"",
		  },
		  replaceTime:[],
		form: {
			id: "",
			replaceStartTime: "",
			replaceEndTime: "",
			replaceUser: "",
		},
		  loginUsers: tool.current.user(),
		  loading: false,
		oldForm: null,
	  }
	},
	  mounted() {

	},
	onLoad() {},
	methods: {
		async initData() {
			this.deptOptions = await this.$cache.tree.options(this.$API.system.dept.treeData.storeName, {});
		},
	  relHandler(relMap) {
		if (!this.form.relMaps) {
		  this.form.relMaps = {};
		}
		for (let key in relMap) {//清空旧的数据
		  this.form.relMaps[key] = {};
		}
		//重新赋值新数据
		Object.assign(this.form.relMaps, relMap);
	  },
	  //显示
	  open(entity) {
		this.form = Object.assign({}, entity);
		this.oldForm = Object.assign({}, this.form);
		this.visible = true;
		this.initData();
	  },
	  //保存
	  async save() {
		if(!this.form.replaceUser){
			this.$message.error("请先选择代岗人");
			return;
		}
		if(this.replaceTime.length === 0){
			this.$message.error("请先选择休假时间");
			return;
		}
		this.form.replaceStartTime = this.replaceTime[0];
		this.form.replaceEndTime = this.replaceTime[1];
		if(new Date(moment(this.form.replaceEndTime).format("YYYY-MM-DD")) <= new Date(moment(new Date()).format("YYYY-MM-DD"))){
			this.$message.error("休假结束时间只能大于当前时间");
			return;
		}
		  try {
			  this.loading = true
			  var res;
			  if (this.form.id) {
				  res = await this.$API.system.tempLeave.edit.post(this.form)
			  } else {
				  res = await this.$API.system.tempLeave.add.post(this.form)
			  }
			  if (res.code === 2000) {
				  this.$emit('success');
				  this.$message.success(this.$t("code."+res.code));
				  this.visible = false;
				  this.$store.dispatch("commit",this.form.entityName);
			  } else {
				  this.$message.warning(res.message)
			  }
		  } finally {
			  this.loading = false
		  }
	  },
	}
  }
  </script>

  <style scoped>
  h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
  }

  [data-theme="dark"] h2 {
	color: #fff;
  }
  .label-center{
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
  :deep(.labelClassName){
	  color: red !important;
  }

  .colClass {
	  height: 45px;
  }

  .card-form-item{
	  margin-left: 10px;
	  margin-right: 10px;
	  margin-bottom: 20px;
  }

  .card-form-item .el-form-item__label {
	  color: #656565;
	  /*font-size: 9pt;*/
	  font-size: 14px;

  }


  .card-form-item .el-form-item__content {
	  font-size: 14px;
  }
  .card-form-item .el-form-item__content   .el-input--small {
	font-size: 14px;
  }



 .widget-edit-true .el-form-item__content .el-input--small:not(.el-textarea){
	/*border-bottom: 1px solid rgba(66,124,255, 0.4);*/
	border: 1px solid #d9d9d9;
	border-radius: 4px;
  }

  .dialogsearch  .widget-edit-true .el-form-item__content {
	border-bottom: 1px solid rgba(92,114,180, 0.4);
  }




 .card-form-item .el-input__wrapper {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .card-form-item .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .el-form-item.is-error .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .card-form-item .el-select .el-input .el-input__wrapper {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .card-form-item .el-select .el-input .el-input__wrapper.is-focus {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .el-form-item.is-error .el-select .el-input.is-focus .el-input__wrapper {
	  box-shadow: 0 0 0 0 var(--el-input-border-color,var(--el-border-color)) inset!important;
  }

  .dialogsearch .card-form-item .el-input__wrapper{
	  box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset!important;
  }




  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before{
	  display: none;
  }

  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::after, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label .leftLabel::after{
	  content: '*';
	  color: #F56C6C;
	  margin-left: 4px;
  }

  .card-form-item .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label .rightLabel::before{
	  content: '*';
	  color: #F56C6C;
	  margin-right: 4px;
  }

  .el-form-item__content:has(.fileTemp){
	border-color: #FFF !important;
  }

  .cardContent .card-form-item .el-form-item__label {
	  color: #5b6bb3;
	  /*font-size: 9pt;*/
	  font-size: 14px;

  }


  .cardContent .card-form-item .el-form-item__content {
	padding-top: 3px;
	  padding-right: 3px;
	  font-size: 14px;
  }
  .cardContent .card-form-item .el-form-item__content   .el-input--small {
	font-size: 14px;
  }


  .cardContent .card-form-item .el-form-item__content  .el-date-editor--date{
	padding-top: 3px;
	  padding-right: 3px;
  }
  </style>
